<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <style>
        .area {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 24px;
        }
        .area input {
            margin-left: 30px;
        }
        .funIcon {
            width: 240px;
            height: 240px;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>数据导入</h5>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12 area">
                        <img class="funIcon" src="./img/import.svg" alt="">
                        <div>
                            <span id="upancheck">未检测到终端</span>
                            <input id="upanbtn" type="button" value="导入" disabled />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/layer-v3.1.1/layer.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>

    <script>
        $(function () {
            setInterval(function () {
                $.get("http://localhost:64752/api/udisk/find", function (res) {
                    if (res == "ok") {
                        $("#upancheck").text("发现终端，点击导入按钮可导入数据");
                        $("#upanbtn").prop("disabled", false);
                    }
                    else {
                        $("#upancheck").text("未检测到终端");
                        $("#upanbtn").prop("disabled", true);
                    }
                });
            }, 1000);
            
            $("#upanbtn").click(function () {
                layer.msg('正在导入中，请勿拔出终端...', {
                    icon: 16,
                    shade: 0.5,
                    time: 0
                });
                $.get("http://localhost:64752/api/data/import", function (res) {
                    if (res == "ok") {
                        layer.closeAll('loading');
                        layer.msg("导入成功");
                        setTimeout(function () {
                            parent.location.reload();
                        }, 1000);
                    }
                });
            });
        });

    </script>    
</body>

</html>
